<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <!-- 生产环境中不建议使用 -->
        <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    </head>
    <body>
        <div id="test">

        </div>

        <button id="btn1">按钮1</button>
        <button id="btn2">按钮2</button>
        <button id="btn3" onclick="btn3()">按钮3</button>
    </body>
    <script type="text/babel">
        // 1. 创建虚拟DOM   JSX创建虚拟DOM
        const VDom = <h1>hello,react</h1>/* 此处这里不需要写引号,因为不是字符串 */
        // 2. 渲染虚拟DOM到页面
        ReactDOM.render(VDom,document.getElementById('test'))

    </script>
    <script>
        /* 
            react 是什么
                react是一个将数据渲染为HTML视图的来源JavaScript库
            react的特点
                1.采用组件化模式/声明式编码,提高开发效率及组件复用率
                2.在React Native中可以使用React语法进行移动端开发
                3.使用虚拟DOM + 优秀的Diffing算法,尽量减少与真实DOM的交互
            react高效原因
                1.是用虚拟DOM,不总是直接操作页面真实DOM
                2.DOM Diffing算法,最小化页面重绘
            
            1.准备一个容器 id为test
            2.引入react核心库  react.development.js
            3.引入react-dom用于支持react操作DOM  react-dom.development.js
            4.引入babel 用于将jsx转为js     babel.min.js

            <script type="text/babel">   type必须是 text/babel
        */

        var btn1 = document.getElementById("btn1");
        btn1.addEventListener('click',function(){
            alert("点击按钮1");
        })

        var btn2 = document.getElementById("btn2");
        btn2.onclick = function(){
            alert("点击按钮2")
        }

        function btn3(){
            alert("点击按钮3(react采用第三种方式)")
        }

        
        // 解构
        var arr1 = [1,2,3,4,5,6];
        var arr2 = [5,6,9,87,7];
        console.log(...arr1);
        console.log(...arr2);

        // reduce计算数组元素相加后的总和
        // reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
        function sun(...number){
            return number.reduce((q,h)=>{
                return q + h
            })
        }
        console.log(sun(1,23,5,6,8));

        //构造字面量对象时使用展开语法
        let person = {name:'tom',age:18};
        let person2 = {...person};// 这里必须加{}
        // console.log(...person); 这里是错误的  解构对象必须加{}
        person.name = "hahah";
        console.log(person);
        console.log(person2);
        // 合并
        let person3 = {...person,name:'jack',address:'地球'};
        console.log(person3);
    </script>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                